<div class="l-pinpoint-user-wrapper">
    <div class="l-pinpoint-user-title">
        <span>Pinpoint User ({{pinpointUserList.length}})</span>
        <button [hidden]="!allowedUserEdit" class="btn btn-sm btn-blue" (click)="onShowCreateUserPopup()">+ Add</button>
    </div>
    <div class="l-pinpoint-user-search">
        <input type="text" placeholder="{{i18nText.SEARCH_INPUT_GUIDE}}" class="l-search-input" 
            ppSearchInput 
            [searchMinLength]="minLength.search"
            [useEnter]="searchUseEnter"
            (outSearch)="onSearch($event)">
    </div>
    <div class="l-pinpoint-user-list" infiniteScroll (scrolled)="onScroll($event)" [scrollWindow]="false">
        <pp-pinpoint-user
            *ngFor="let pinpointUser of displayPinpointUserList"
            [pinpointUser]="pinpointUser"
            [isEnabled]="isUserGroupSelected"
            [isChecked]="isChecked(pinpointUser.userId)"
            [allowedUserEdit]="allowedUserEdit"
            (outRemove)="onRemovePinpointUser($event)"
            (outEditUser)="onEditPinpointUser($event)"
            (outAddUser)="onAddUser($event)">
        </pp-pinpoint-user>
    </div>
    <div class="l-message" [hidden]="!hasMessage()">
        <button class="btn btn-black" (click)="onCloseMessage()"><i class="fas fa-times"></i></button>
        <span>{{message}}</span>
    </div>
    <pp-pinpoint-user-create-and-update
        [showCreate]="showCreate"
        [i18nLabel]="i18nLabel"
        [i18nGuide]="i18nGuide"
        [minLength]="minLength"
        [editPinpointUser]="editPinpointUser"
        (outUpdatePinpointUser)="onUpdatePinpointUser($event)"
        (outCreatePinpointUser)="onCreatePinpointUser($event)"
        (outClose)="onCloseCreateUserPopup()"
    ></pp-pinpoint-user-create-and-update>
    <pp-film-for-disable *ngIf="useDisable" [zIndex]="9" [marginWidth]="0"></pp-film-for-disable>    
    <pp-loading [showLoading]="showLoading" [zIndex]="20"></pp-loading>
</div>
